<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="moil">
<head>
    <%@include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <title>${title}</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <!-- 响应式设计 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body ng-controller="AllDocCtrl">
<!-- content -->
<div class="u_child_box">
    <div class="u_title_bar">
        <span id="device_info" class="u_title">部门编辑</span>
    </div>
</div>
<form:form id="inputForm" action="${ctx}/security/department/save" commandName="department" cssClass="well form-inline"
           method="post">
    <%--<form id="inputForm" class="well form-inline" action="${ctx}/security/department/save" method="post">--%>
    <input type="hidden" name="id" value="${department.id}"/>
    <table class="table table-striped table-bordered table-condensed">
        <thead>
        <strong>
            <i class="icon-flag"></i>
            部门名称表单
        </strong>
        </thead>
        <tr>
            <td class="span2">部门名称:</td>
            <td>
                <input id="name" name="name" type="text" value="${department.name}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td class="span2">部门编号:</td>
            <td>
                <input id="code" name="code" type="text" value="${department.code}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td>类型:</td>
            <td>
                <form:select path="type.id" items="${typeList}" itemValue="id" itemLabel="name">
                </form:select>
            </td>
        </tr>
        <tr>
            <td>上级部门:</td>
            <td>
                <form:select path="parent.id" items="${departmentList}" itemLabel="name" itemValue="id"></form:select>
            </td>
        </tr>
        <tr>
            <td>部门联系人:<i class="icon-plus-sign" ng-click="addContact()"></i></td>
            <td>
                <div ng-repeat="linkMan in linkMans" style="margin: 3px;">
                    姓名:<input class="span2" ng-model="linkMan.name" name="linkMans[{{$index}}].name" type="text"/>
                    职位:<input class="span2" ng-model="linkMan.position" name="linkMans[{{$index}}].position"
                              type="text"/>
                    电话:<input class="span2" ng-model="linkMan.phone" name="linkMans[{{$index}}].phone" type="text"/>
                    <i ng-show="linkMans.length > 1" class="icon-minus-sign" ng-click="deleteContact($index)"></i>
                </div>
            </td>
        </tr>
        <tr>
            <td class="span2">邮编:</td>
            <td>
                <input id="zipCode" name="zipCode" type="text" value="${department.zipCode}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td class="span2">地址:</td>
            <td>
                <input id="address" class="span6" name="address" type="text" value="${department.address}" size="100"
                       maxlength="80"/>
            </td>
        </tr>

        <tr>
            <td>备注:</td>
            <td>
                <textarea id="memo" name="memo" rows="4" class="span6">${department.memo}</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input class="btn" type="submit" value="提交"/>
                &nbsp;
                <input class="btn" type="button" value="返回" onclick="history.back()"/>
            </td>
        </tr>
    </table>
    <%--</form>--%>
</form:form>
<script>

    (function () {
        angular.module("moil", []);
        window.AllDocCtrl = function ($scope, $rootScope) {
            $scope.linkMans = new Array();
            <c:forEach items="${department.contacts}" var="linkMan">
            $scope.linkMans.push({
                name: "${linkMan.name}", position: "${linkMan.position}", phone: "${linkMan.phone}"
            });
            </c:forEach>
            $scope.addContact = function () {
                $scope.linkMans.push({});
            }
            $scope.deleteContact = function (index) {
                $scope.linkMans.removeItem(index);
                // $scope.$apply();
            }

            if ($scope.linkMans.length < 1) {
                $scope.addContact();
            }
        }
    })();
    $(document).ready(function () {
        //聚焦第一个输入框
        $("#name").focus();
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                name: "required",
                type: "required"
            }
        });

    });
</script>
</body>
</html>